<script setup>
//引入网络请求函数
import { fetchIndicesData } from "@/api/weatherAPI";
//引入响应式数据
import { ref, watch } from "vue";
//引入状态管理
import { useCityStore } from "../stores/cityStore";

// 引入路由
import { useRouter } from "vue-router";
//获取路由router实例
const router = useRouter()

//获取store实例
const cityStore = useCityStore();

//添加侦听器:监听状态管理中location状态的变化
watch(
  //监听的数据源
  () => cityStore.location,
  //回调函数,当数据源有变化时，需要做的事情
  () => {
    getData(cityStore.location.id);
  },
  //即时回调，初始状态执行一个回调函数【请求未来24小时天气预报数据函数】
  { immediate: true }
);
//声明响应式数据
const indiceDaily = ref([]);
//网络请求，获取后台数据
async function getData(locationID) {
  const res = await fetchIndicesData(locationID, 0);
  console.log(res);
  indiceDaily.value = res.daily;
}

//生活指数列表的单击事件
function selectItem(item) {
  //console.log(item.type);
  //router.push('/livingdatail/' + item.type)   //第1种方式：字符串路径
  router.push(`/livingdatail/${item.type}`)  //第1种方式：字符串路径，模板字符串写法
  //router.push({path:'/livingdatail/' + item.type})  //第2种方式：对象写法
  //router.push({path:`/livingdatail/${item.type}`})  //第2种方式：对象写法，模板字符串写法
  //router.push({name:'LivingDetail',params:{id: item.type}})  //第3种方式：对象写法，模板字符串写法
}

</script>

<template>
<div class="indice">
    <h3>生活指数</h3>
    <ul>
      <li v-for="(item, i) in indiceDaily" :key="i" @click="selectItem(item)">
        <p>{{ item.name }}</p>
        <p>{{ item.category }}</p>
      </li>
    </ul>
  </div>
</template>

<style scoped>
.indice {
  background-color: rgb(172, 249, 247);
  border-radius: 1rem;
  padding: 2rem ;
}
.indice h3{
    text-align: center;
}
.indice>ul{
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 1rem;
    gap: 1rem;

}

.indice>ul>li{
background-color: aqua;
border-radius: 0.5rem;
padding: 1rem;
cursor: pointer;
}
.indice>ul>li>p:nth-of-type(1){
font-weight: bolder;
}
.indice>ul>li>p:nth-of-type(2){
    color: #969898;
    font-size: 0.8rem;
}
</style>
